<template>
  <div style="margin: 20px">
    <el-card>
      <div style="margin-bottom: 10px; display: flex">
        <el-input
          class="w-50 m-2"
          style="width: 150px"
          placeholder="请输入关键词"
          v-model="form.keywords"
        />
        <el-button style="margin-left: 10px" type="primary" @click="get"
          >角色搜索</el-button
        >
        <el-button @click="toAdd">新建角色</el-button>
      </div>
      <el-table :data="state.tableData" :border="true" highlight-current-row>
        <el-table-column prop="id" label="ID" width="200" />
        <el-table-column prop="name" label="角色名称" width="300" />
        <el-table-column prop="active" label="激活状态">
          <template v-slot="scope">
            <el-tag v-if="scope.row.active == '1'">已激活</el-tag>
            <el-tag type="warning" v-else>未激活</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="300">
          <template v-slot="scope">
            <el-button link size="small" @click="toEdit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="是否确认删除该项？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="doDel(scope.row.id)"
            >
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
            <el-button
              link
              type="primary"
              size="small"
              @click="toResource(scope.row.id)"
              >查看权限</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pagination"
        v-model:current-page="form.current"
        v-model:page-size="form.size"
        :page-sizes="[10, 20, 50]"
        :small="false"
        :disabled="false"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="state.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>
    <el-dialog
      v-model="dlgState.visible"
      title="新增角色"
      :width="600"
      @close="clean"
    >
      <el-form :model="dlgState.form" ref="dlg_form">
        <el-form-item label="角色名称：" prop="name">
          <el-input v-model="dlgState.form.name"></el-input>
        </el-form-item>
        <el-form-item label="激活状态：" prop="active">
          <el-input v-model="dlgState.form.active"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancelAdd">返回</el-button>
          <el-button type="primary" @click="doAdd" v-if="dlgState.isAdd">
            新增
          </el-button>
          <el-button type="primary" @click="doEdit" v-else> 保存 </el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog
      v-model="resourceState.visible"
      title="查看权限"
      :width="600"
      @close="clean"
    >
      <el-button
        style="margin-left: 10px"
        type="primary"
        @click="getotherresource"
        >绑定权限</el-button
      >
      <el-table
        :data="resourcestate.tableData"
        :border="true"
        highlight-current-row
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="资源名称" />
        <el-table-column prop="frontUrl" label="前端url" />
        <el-table-column prop="backUrl" label="后端url" />
        <el-table-column prop="type" label="资源类型" />
        <el-table-column fixed="right" label="Operations">
          <template v-slot="scope">
            <el-popconfirm
              title="是否确认删除该项？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="doResourceDel(scope.row.id)"
            >
              <template #reference>
                <el-button link type="danger" size="small">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog
      v-model="addresourceState.visible"
      title="绑定权限"
      :width="600"
      @close="clean"
    >
      <el-table
        :data="addresourcestate.tableData"
        :border="true"
        highlight-current-row
      >
        <el-table-column prop="id" label="ID" />
        <el-table-column prop="name" label="资源名称" />
        <el-table-column prop="frontUrl" label="前端url" />
        <el-table-column prop="backUrl" label="后端url" />
        <el-table-column prop="type" label="资源类型" />
        <el-table-column fixed="right" label="Operations">
          <template v-slot="scope">
            <el-popconfirm
              title="是否绑定该资源？"
              confirm-button-text="是"
              cancel-button-text="否"
              @confirm="doResourcelink(scope.row.id)"
            >
              <template #reference>
                <el-button link type="danger" size="small">绑定</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage } from "element-plus";
import roleApi from "@/api/user/role";

// type definition
type role = {
  id: number;
  name: string;
  active: number;
};
type umsResource = {
  id: number;
  name: string;
  active: number;
};
// tableData
const form = reactive({
  current: 1,
  keywords: "",
  size: 10,
});
const toResourceform = reactive({
  current: 1,
  keywords: "",
  size: 10,
});
const linkResourceform = reactive({
  current: 1,
  keywords: "",
  size: 10,
});
const resourcedel = reactive({
  roleId: 0,
  resourceId: 0,
});
const state = reactive({
  total: 0,
  tableData: [] as Array<role>,
});
const resourcestate = reactive({
  total: 0,
  tableData: [] as Array<umsResource>,
});
const addresourcestate = reactive({
  total: 0,
  tableData: [] as Array<umsResource>,
});
const handleSizeChange = (val: number) => {
  form.size = val;
  get();
};
const handleCurrentChange = (val: number) => {
  form.current = val;
  get();
};
const get = () => {
  roleApi.get(form).then((res) => {
    if (res.data.code === 200) {
      state.tableData = res.data.data.records;
      state.total = res.data.data.total;
    }
  });
};
// 对话框
const dlg_form = ref();
const dlgState = reactive({
  isAdd: true,
  visible: false,
  form: {
    id: 0,
    name: "",
    active: 0,
  },
});
const resourceState = reactive({
  visible: false,
  form: {
    id: 0,
    name: "",
    frontUrl: "",
    backUrl: "",
    type: 0,
  },
});
const addresourceState = reactive({
  visible: false,
  form: {
    id: 0,
    name: "",
    frontUrl: "",
    backUrl: "",
    type: 0,
  },
});
const toAdd = () => {
  dlgState.isAdd = true;
  dlgState.visible = true;
};
const cancelAdd = () => {
  dlgState.visible = false;
};
const doAdd = () => {
  roleApi.add(dlgState.form).then((res) => {
    if (res.status === 200) {
      ElMessage.success("操作成功");
      get();
      dlgState.visible = false;
    }
  });
};
const clean = () => {
  dlgState.form = {
    id: 0,
    name: "",
    active: 0,
  };
};

const toEdit = (row: role) => {
  dlgState.form = row;
  dlgState.isAdd = false;
  dlgState.visible = true;
  console.log(editForm.form);
};
const doEdit = () => {
  roleApi.update(dlgState.form).then((res) => {
    console.log(res);
    if (res.status === 200) {
      ElMessage.success("保存成功");
      get();
      dlgState.visible = false;
    }
  });
};

const toResource = (id: number) => {
  toResourceform.keywords = id.toString();
  resourcedel.roleId = id;
  resourceState.visible = true;
  roleApi.getResources(toResourceform).then((res) => {
    if (res.data.code === 200) {
      resourcestate.tableData = res.data.data.records;
    }
  });
};
const getotherresource = () => {
  addresourceState.visible = true;
  toResourceform.keywords = resourcedel.roleId.toString();
  roleApi.getotherresources(toResourceform).then((res) => {
    if (res.data.code === 200) {
      addresourcestate.tableData = res.data.data.records;
    }
  });
};
// 执行删除
const doResourceDel = (id: number) => {
  resourcedel.resourceId = id;
  roleApi.delResources(resourcedel).then((res) => {
    if (res.data.code === 200) {
      ElMessage.success("删除成功");
      toResource(resourcedel.roleId);
    }
  });
};

// 绑定资源
const doResourcelink = (id: number) => {
  linkResourceform.keywords = id.toString();
  resourcedel.resourceId = id;
  resourceState.visible = true;
  roleApi.addroleresource(resourcedel).then((res) => {
    if (res.data.code === 200) {
      addresourceState.visible = false;
      toResource(resourcedel.roleId);
    }
  });
};
// 项目删除
const doDel = (id: number) => {
  roleApi.del(id).then((res) => {
    if (res.status === 200) {
      ElMessage.success("删除成功");
      get();
    }
  });
};
// 项目编辑
const editForm = reactive({
  form: {
    name: "",
    type: 1,
    description: "",
  },
});

onMounted(() => {
  get();
});
</script>
<style lang="scss" scoped>
.tabs > .el-tabs__content {
  width: 100%;
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
.tabs {
  margin: 20px;
}
</style>
